Next.jsのスタンドアロンモードでビルドしたイメージを AWS App Runnerへデプロイする

Next.jsのスタンドアロンモードでビルドしたイメージを AWS App Runnerへデプロイする

Clock Icon2022.06.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

まえがき

パク...リスペクト記事で、App Runnerでやってみました。

手順

今回つかったサンプルはこちらです

Next.jsのプロジェクト作成

npx create-next-app app-runner-nextjs --ts --use-npm 

Next.jsのスタンドアロンモード設定します

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    outputStandalone: true,
  },
};

module.exports = nextConfig;

スタンドアローンモードでの動作確認

npm run build
cd .next/standalone
node server.js 

http://localhost:3000/ にアクセスできるはずです!

Dockerfileを作成

Next.jsのスタンドアロンモードで起動するDockerfileを作成します。

FROM node:16 AS builder
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install
RUN npm run build

FROM node:16-stretch-slim AS runner
ENV NODE_ENV=production
COPY --from=builder /usr/src/app/next.config.js ./
COPY --from=builder /usr/src/app/public ./public
COPY --from=builder /usr/src/app/.next/static ./.next/static

COPY --from=builder /usr/src/app/.next/standalone ./
CMD ["node", "server.js"]

Dockerでの動作確認

docker build -t app-runner-nextjs .
docker run  -p 3000:3000 app-runner-nextjs

http://localhost:3000/ にアクセスできるはずです!

ECRにImageをアップロード

コンソールに行きAWS ECRのリポジトリを作る

ECRリポジトリを作成

ECRリポジトリを作成

ECRリポジトリを作成

ECRリポジトリを作成

ECRリポジトリを作成

ECR作成のリポジトリPushする手順の説明があるので、参考にしてImageをアップロードします。

ECRリポジトリを作成

ECRリポジトリを作成

aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin [YOUR NUMMBER].dkr.ecr.ap-northeast-1.amazonaws.com
docker build -t app-runner-nextjs .
docker tag app-runner-nextjs:latest [YOUR NUMMBER].dkr.ecr.ap-northeast-1.amazonaws.com/app-runner-nextjs:latest
docker push [YOUR NUMMBER].dkr.ecr.ap-northeast-1.amazonaws.com/app-runner-nextjs:latest

もしプロファイル設定をしているなら、プロファイルを指定するようにしてください。

aws ecr get-login-password --profile [YOUR PROFILE] --region ap-northeast-1 | docker login --username AWS --password-stdin [YOUR NUMMBER].dkr.ecr.ap-northeast-1.amazonaws.com

はまりどころ: M1 MAC対応

M1 MACでImageを作成すると、ARMで作られてしまい、起動できません。

App Runnerでエラー

App Runnerでエラー

--platform=linux/x86_64 をつけてbuildしてください。App RunnerはARMのイメージで起動できないようです。

docker build --platform=linux/x86_64 -t app-runner-nextjs .

App Runner

App Runnerのサービス作成

App Runnerのサービス作成

App Runnerのサービス作成

App Runnerのサービス作成

App Runnerのサービス作成

App Runnerのサービス作成

デプロイ完了になるまで数分かかると思います。

App Runnerのサービス作成

デフォルトドメインが表示されているので、アクセスすると無事にデプロイされているのが確認できると思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.